<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="breadcrumb-container">
          <el-input v-model="searchWord" placeholder="材料名称" @keyup.enter.native="searchBtn" size="small"
                    class="w-140 mr-10"></el-input>
          <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
        </div>
        <div class="breadcrumb-container">
          <el-button type="primary" @click.native="addFood('add')" size="small">新增材料</el-button>
          <el-button size="small" type="danger" plain :disabled="handleSelection.length!==0?false:'disabled'"
                     @click="handleDetel('all')">批量删除
          </el-button>
          <span class="allbook">总 {{ page.total }} 条数据</span>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableoption.tableStripe"
              :border="tableoption.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="100">
            </el-table-column>
            <el-table-column
                prop="id"
                label="ID"
                width="50">
            </el-table-column>
            <el-table-column
                prop="name"
                label="材料名称">
            </el-table-column>
            <el-table-column
                label="操作"
                width="180">
              <template slot-scope="scope">
                <el-button size="small" @click="handleEdit(scope.$index, 'edit')">材料编辑</el-button>
                <el-button type="danger" size="small" @click="handleDetel(scope.$index)" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
      <footAdd :dialogType.sync='dialogType' :foodOption.sync="foodOption" :visible.sync="dialogVisible"
               @initPage="InitFn"></footAdd>
    </div>
  </div>
</template>

<script>
import footAdd from '@/components/dialog/footAdd.vue'
import {pagination, tableoption, yeartime} from '@/utils/util.js'

export default {
  components: {
    footAdd
  },
  data() {
    return {
      tableList: [{name: '全部', id: 0}],
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      first_id: '',
      arryList: [], // 数据列表
      // 搜索
      searchWord: '',
      searchCatId: 0,
      // 弹窗
      dialogVisible: false,
      editIndex: null,
      foodOption: '',
      dialogType: null,
      handleSelection: [], // checked选中框
    }
  },
  created() {
    this.cateListFn()
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.$post(this.api.food_list, {
        p: this.page.pageindex,
        name: this.searchWord,
        cat_id: this.searchCatId
      }).then((response) => {
        if (response.code === 0) {
          for (let i in response.list.data) {
            response.list.data[i].create_time = yeartime(response.list.data[i].create_time)
          }
          this.arryList = JSON.parse(JSON.stringify(response.list.data))
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    cateListFn() {
      this.$fetch(this.api.cate_list, {
        p: 1
      }).then((response) => {
        if (response.code === 0) {
          for (let i in response.list.data) {
            this.tableList.push(response.list.data[i])
          }
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      console.log(val) // 所有选中值
      this.handleSelection = val
    },
    // 编辑
    handleEdit(index, option) {
      this.editIndex = index
      this.foodOption = this.arryList[index]
      this.dialogType = option
      this.dialogVisible = true
    },
    // 搜索
    searchBtn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    addFood(option) {
      this.dialogType = optionåç
      this.dialogVisible = true
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.searchCatId = ''
      this.InitFn()
    },
    handleDetel(index) {
      let this_ = this
      if (index !== 'all') {
        this.$confirm('确认删除【' + this.arryList[index].name + '】材料, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          this_.deletFn(index)
        }).catch(() => {
        })
      }else{

      }
    },
    deletFn(index) {
      this.$post(this.api.food_delete, {
        id: this.arryList[index].id
      }).then((response) => {
        if (response.code === 0) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted() {
  }
}
</script>
